<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>fit-start 课件</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="${ctx.resource}/css/vendor/sm.min.new.css">
    <link rel="stylesheet" href="${ctx.resource}/css/courseware.css">
    <link rel="stylesheet" href="${ctx.resource}/css/component/qiniuplayer.min.css">
  </head>
  <body>
    <div class="page-group">
     
      <div class="page page-current courseware" id="homepage">
        <header class="bar bar-nav">
          <c:if test="${!online}">
            <a class="button button-link pull-left back" href="#" onClick="javascript:history.back(-1);">返回</a>
          </c:if>
          <h1 class="title">${dailyCourseware.name}</h1>
        </header>
        <div class="content" style="margin-bottom: 2.5rem;">
          <c:set var="coursewares" value="${persist.courseware(dailyCourseware.id)}"/>
          <c:choose>
            <c:when test="${empty coursewares and dailyCourseware.type.rest}">
              <div class="rest text-center">今日休息</div>
            </c:when>
            <c:otherwise>
              <c:forEach var="type" items="${enums['coursewareMovementType']}">
                <div class="movement-type">${type.description}</div>
                  <c:forEach var="courseware" items="${coursewares[type.alias]}">
                    <div class="train-item show-up">
                      <div class="item">
                        <span class="inner">${courseware.movement.name}</span>
                        <span class="icon icon-down"></span>
                      </div>
                      <div class="description-box">
                        <div class="intro">
                          <h6 class="intro-title no-margin">${courseware.groupAmount}组<c:if test="${courseware.movementNumber ne 0}">，每组${courseware.movementNumber}次</c:if><c:if test="${not empty courseware.time and courseware.time ne 0}">，每组${courseware.time}分钟</c:if></h6>
                          <p class="category-box"><span class="category">类别: ${courseware.movement.category.name}</span><span class="equipment">器材：${courseware.movement.equipment.name}</span></p>
                          <c:if test="${online}">
                            <p>${courseware.movement.summary}</p>
                          </c:if>
                          <div class="video-box" style="position: relative;">
                            <c:choose>
                              <c:when test="${not empty courseware.movement.videoLink}">
                                <video id="vedio${courseware.id}" data-courseware="${courseware.id}" data-link="${courseware.movement.videoLink}" class="video-js vjs-big-play-centered"></video>
                              </c:when>
                              <c:otherwise>
                                <img src="${cloud.prod}/${courseware.movement.cover}" style="width: 100%;">
                              </c:otherwise>
                            </c:choose>
                          </div>
                        </div>
                        <a href="javascript:void(0);" class="button button-yellow done-button">DONE</a>
                      </div>
                    </div>
                  </c:forEach>
              </c:forEach>
              
            </c:otherwise>
          </c:choose>
        </div>
        <nav class="bar bar-footer product-detail-footer">
          <a href="${ctx.host}/profile/courses/${courseId}" class="external button button-yellow train-button external" style="top: 0;">返回我的课程</a>
        </nav>
      </div>
      
    </div>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/zepto.js"></script>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/sm-new.js"></script>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/sm-extend-new.js"></script>
    <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
    <script src="${ctx.resource}/js/component/qiniuplayer.min.js"></script>
    <script type="text/javascript">
      
      $youziku.load("body,p,span,a.div", "322f173b999b41e7872896f97e98cbe6", "Source-Han-Normal");
      $youziku.draw();
      
      $(document).ready(function(){
          $(".video-js").each(function() {
              var dataUrl = $(this).data("link");
              var courseware = $(this).data("courseware");
              var options = {
                  controls: false,
                  url: dataUrl,
                  type: 'hls',
                  preload: false,
                  autoplay: true,
                  width: 300,
                  height: 150,
                  stretching: 'letterbox'
                };
                
              var player = new QiniuPlayer('vedio'+courseware, options);
          })
          
        $(document).on("click", ".train-item .item", function(e) {
            e.preventDefault();
            if($(this).parent().hasClass('show-up')) {
                $(this).parent().removeClass('show-up').addClass('show-down');
                $(this).parent().find('.icon').addClass('icon-up').removeClass('icon-down');
            } else if($(this).parent().hasClass('show-down')) {
                $(this).parent().removeClass('show-down').addClass('show-up');
                $(this).parent().find('.icon').addClass('icon-down').removeClass('icon-up');
            }
        })
        
        $(document).on("click", ".done-button", function(e) {
            $(this).parents(".train-item").removeClass('show-down').addClass('show-up');
            $(this).parents('.train-item').find('.icon').addClass('icon-down').removeClass('icon-up');
        })
      })
      
      
    </script>
 
  </body>
</html>